import React, { Component } from 'react'
import Style from './index.scss'

/**
 * 弹窗说明
 */
export default class WAlert extends Component {
	constructor(props) {
		super(props);

		this.state = {};
	}

	close() {
		this.props.onClose();
	}

	render() {
		/* 
		 * 0: 已购买车务卡说明 
		 * 1: 未购买车务卡说明
		 * 2：加急处理 业务使用说明
		 */
		const alerts = [
			<div className={Style.wAlert}>
	            <div className={Style.wAlertBg}></div>
	            <div className={Style.wAlertBody + " " + Style.flexV}>
	                <div className={Style.wAlertTitle}>
	                    <span className={Style.wIcon + " " + Style.wIconVip}></span>
	                    <span>VIP减免说明</span>
	                </div>
	                <div className={Style.wAlertContent + " " + Style.flex1}>
	                    <p>VIP减免不可与优惠券共用，当用户使用优惠券时则不可享受VIP减免一下优惠</p>
	                    <p>1、已成功开通VIP服务的车辆才能减免服务费；</p>
	                    <p>2、VIP服务费减免规则如下：<span className={Style.fontSize26}><br/>违章/认罚时间在该车辆的有效服务时间内免服务费；
	                    <br/>违章/认罚时间在该车辆的有效服务时间前XX天则享受服务费5折优惠（具体天数根据VIP办理有效期）；
	                    <br/>非扣分违章可享受服务费减免（警告单和不在查询结果上的项目除外）；
	                    <br/>在本平台可办理的部分扣分的违章可享受服务费减免。
	                    <br/>在本平台可办理的扣费违章可享受服务费减免（不包括需要去线下处理的违章）；
	                    <br/>本pigtail科办理的跨省违章可享受服务费的减免；
	                    </span></p>
	                    <p>3、服务费减免在该车辆的VIP服务有效时间内不限次数使用。</p>
	                </div>
	                <div onClick={() => this.close()} className={Style.wAlertFooter}><span>我知道了</span></div>
	            </div>
	        </div>,
	        <div className={Style.wAlert} ref="alertBox">
	            <div className={Style.wAlertBg}></div>
	            <div className={Style.wAlertBody + " " + Style.flexV}>
	                <div className={Style.wAlertTitle}>
	                    <span className={Style.wIcon + " " + Style.wIconVip}></span>
	                    <span>VIP车务卡&nbsp;168元/年</span>
	                </div>
	                <div className={Style.wAlertContent + " " + Style.flex1}>
	                    <p><span className={Style.wIconO}></span>违章代办/罚款代缴免服务费下：
		                    <span className={Style.fontSize26}><br/>
	                    	有效期内违章代办及罚款代缴办理免服务费；
	                    	</span>
                    	</p>
	                    <p><span className={Style.wIconO}></span>365天超长VIP时间：
		                    <span className={Style.fontSize26}><br/>
	                    	自办理成功起365天内有效享受vip减免；
	                    	</span>
                    	</p>
                    	<p><span className={Style.wIconO}></span>有效期前1年的代办尊享5折优惠：
		                    <span className={Style.fontSize26}><br/>
	                    	 有效期前1年的违章代办/代缴尊享服务费5折；
	                    	</span>
                    	</p>
                    	<p><span className={Style.wIconO}></span>有效时间内不限次数违章代办：
		                    <span className={Style.fontSize26}><br/>
	                    	成功办理起不限次数减免违章代办服务费；
	                    	</span>
                    	</p>
                    	<p><span className={Style.wIconO}></span>支持市面多数的可代办的违章项目：
		                    <span className={Style.fontSize26}><br/>
	                    	涵盖非扣分项及大部分扣分项；
	                    	</span>
                    	</p>
                    	<p><span className={Style.wIconO}></span>违章提醒快速推送：
		                    <span className={Style.fontSize26}><br/>
	                    	新违章将自动推送，避免错过办理最佳时期；
	                    	</span>
                    	</p>                    	
                    	<p><span className={Style.wIconO}></span>百元优惠大礼包：
		                    <span className={Style.fontSize26}><br/>
	                    	目前办理马上赠送全方位车务优惠礼包：<br/>优惠券与VIP减免金额不能同时使用；
	                    	</span>
                    	</p>
                    	<p className={Style.fontSize24}>更多详情请参看 "我" &gt; "VIP服务"</p>
	                </div>
	                <div onClick={() => this.close()} className={Style.wAlertFooter}><span>我知道了</span></div>
	            </div>
	        </div>,
	        <div className={Style.wAlert} ref="alertBox">
	            <div className={Style.wAlertBg}></div>
	            <div className={Style.wAlertBody + " " + Style.flexV}>
	                <div className={Style.wAlertTitle}>
	                    <span className={Style.wIcon + " " + Style.wIconVip}></span>
	                    <span>业务使用说明</span>
	                </div>
	                <div className={Style.wAlertContent + " " + Style.flex1}>
	                    <p>1、加急处理业务仅在<span className={Style.Orange}> 周一到周五的 8：00 - 17：00</span> 受理，周末和节假日不受理加急单业务。</p>
	                    <p>2、目前加急业务<span className={Style.Orange}>仅支持广东车牌在广东地区的违章</span>，其他地区暂不支持。其他城市的加急业务开通请留意我们的公告。</p>
                    	<p>3、加急业务的进度可能会导致违章查询结果的滞后，请以销网短信为准。</p>
                    	<p>4、如果您支付完成后，订单无法办理加急业务，则我们将退还加急费用，并通过短信通知您，同时我们会继续通过正常流程处理订单。</p>
                    	<p>5、最终业务解释权归车行易所有。</p>
                    </div>
	                <div onClick={() => this.close()} className={Style.wAlertFooter}><span>我知道了</span></div>
	            </div>
	        </div>
		]
		return (
			<div>
				{alerts[this.props.num]}
			</div>
		)
	}
}

WAlert.defaultProps = {
	num : 1 //0：已购买车务卡说明、1：未购买车务卡说明、2：加急处理
}